<template>
  <div class="coupang">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="待审核" name="ACCEPT">
        <StatusModal :activeName="activeName"></StatusModal>
      </el-tab-pane>
      <el-tab-pane label="产品准备中" name="INSTRUCT">
        <StatusModal :activeName1="activeName"></StatusModal>
      </el-tab-pane>
      <el-tab-pane label="运送开始" name="DEPARTURE">
        <StatusModal :activeName2="activeName"></StatusModal>
      </el-tab-pane>
      <el-tab-pane label="运送中" name="DELIVERING">
        <StatusModal :activeName3="activeName"></StatusModal>
      </el-tab-pane>
      <el-tab-pane label="运送完成" name="FINAL_DELIVERY">
        <StatusModal :activeName4="activeName"></StatusModal>
      </el-tab-pane>
      <el-tab-pane label="卖家自行配送" name="NONE_TRACKING">
        <StatusModal :activeName5="activeName"></StatusModal>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import StatusModal from "./components/StatusModal.vue";

export default {
  components: {
    StatusModal,
  },
  data() {
    return {
      activeName: "ACCEPT",
    };
  },
  created() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.coupang {
  padding: 0px 6px;
}

::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  //border: 0;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: #2e82ff 1px solid;
  //border-left: 0;

  &:hover {
    cursor: pointer;
    color: #2e82ff;
  }
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-left: #2e82ff 1px solid !important;
  border-right: #2e82ff 1px solid !important;
  border-top: #2e82ff 1px solid !important;
  color: #2e82ff;
  border-bottom: none;
}
</style>
